<template>
  <div class="flex flex-wrap">
    <div v-for="el in data" :key="el.id" class="pr-2 pb-2 sm:w-1/2 md:w-1/3">
      <a-card hoverable :body-style="{ padding: 16 + 'px' }" @click="toggleSel(el)">
        <a-card-meta :description="el.personalSignature">
          <template #avatar>
            <a-avatar :src="el.avatar || DEFAULT_IMG_BASE64_STR" />
          </template>
          <template #title>
            <span>{{ el.nickName }}</span>
            <a-checkbox v-model:checked="el.checked" class="!ml-3" v-if="checked" />
          </template>
        </a-card-meta>
        <div class="member-des">{{ el.introduction }}</div>
      </a-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, watch } from "vue";
import { AppUserInfo } from "/@/api/manage/userManage";
import { DEFAULT_IMG_BASE64_STR } from "/@/utils/img";

export default defineComponent({
  props: {
    data: {
      required: true,
      type: Array as PropType<AppUserInfo[]>,
    },
    checked: Boolean,
    idArr: Array as PropType<string[]>,
  },
  setup(props, ctx) {
    function toggleSel(el) {
      if (!props.checked) return;
      el.checked = !el.checked;
      ctx.emit("change", el);
    }
    watch(
      () => props.data,
      (list) => {
        const idArr: string[] = [];
        list.forEach((item) => {
          idArr.push(item.id as string);
        });
        ctx.emit("update:idArr", idArr);
      },
      {
        immediate: true,
      }
    );
    return {
      toggleSel,
      DEFAULT_IMG_BASE64_STR,
    };
  },
});
</script>
